import React, { useState, useImperativeHandle, forwardRef } from 'react'
import styles from './index.module.scss'

const Coordinate = ({}, ref) => {
  const [coord, setCoord] = useState({ x: 0, y: 0 })

  useImperativeHandle(
    ref,
    () => ({
      setCoord: arg => setCoord(arg)
    }),
    []
  )

  return (
    <div className={styles.coordinate}>
      <span className={styles.num}>{`X: ${JSON.stringify(coord.x)}`}</span>
      <span className={styles.num} style={{ marginLeft: '22px' }}>{`Y: ${JSON.stringify(coord.y)}`}</span>
      <span className={styles.versionNumber} style={{ float: 'right' }}>
        {`版本号: ${window.versionNumber}`}
      </span>
    </div>
  )
}

export default forwardRef(Coordinate)
